<template>
	<el-dialog
		v-model="dialogVisible"
		title="路线规划"
		width="80%"
		align-center
		:before-close="onDialogClose"
		class="dialogVisible"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<div class="container">
			<div class="route-plan-box">
				<div class="top">
					<el-tooltip effect="dark" :content="mapInfo.startAddr" placement="top">
						<el-input v-model="mapInfo.startAddr" placeholder="请输入起始地址" disabled>
							<template #prepend>起</template>
						</el-input>
					</el-tooltip>
					<el-tooltip effect="dark" :content="mapInfo.endAddr" placement="top">
						<el-input v-model="mapInfo.endAddr" placeholder="请输入终点地址" disabled>
							<template #prepend>终</template>
						</el-input>
					</el-tooltip>
				</div>
				<div class="bottom">
					<el-scrollbar>
						<ul class="addres"></ul>
						<div class="route-plan">
							<ul class="route-types">
								<li
									class="route-type"
									:class="type.policy == nowActiveType && 'active-type'"
									v-for="type in routeLineList"
									:key="type.policy"
									@click="changeRouteType(type.policy)"
								>
									{{ type.name }}
								</li>
							</ul>
						</div>
						<ul class="route-lines">
							<li
								class="route-line"
								:class="nowAtiveLine == index && 'active-line'"
								v-for="(item, index) in nowRouteLineList"
								:key="index"
								@click="changeRouteLine(index)"
							>
								<div class="tip">方案{{ index + 1 }}</div>
								<el-space :size="20" spacer="|">
									<span>约{{ getRouteLineTime(item) }}分钟</span>
									<span>{{ getRouteLineKm(item) }}公里</span>
								</el-space>
								<div class="roads">途径：{{ getRoads(item) }}</div>
							</li>
						</ul>
					</el-scrollbar>
				</div>
			</div>
			<div id="input-map-container">loading</div>
		</div>

		<template #footer>
			<span class="flex justify-center">
				<el-button type="primary" @click="onDialogClose">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { loadAmap } from '/@/utils/mapLoad';
import { drawDriveLine, getRouteLine } from '/@/utils/mapUtils';

const props = withDefaults(
	defineProps<{
		mapInfo: { startAddr: string; endAddr: string; id: string; mapType: string; mapIndex: string };
	}>(),
	{}
);
const emits = defineEmits(['handle-finish']);

// 路线列表
const routeLineList = ref<any[]>([
	{ name: '推荐方案', policy: 10, infos: {} },
	{ name: '速度最快', policy: 12, infos: {} },
	{ name: '费用最低', policy: 14, infos: {} },
]);

// 当前选中的方案
const nowActiveType = ref(props.mapInfo.mapType || 10);
// 当前选中的路线
const nowAtiveLine = ref(Number(props.mapInfo.mapIndex) || 0);
// 当前路线列表
const nowRouteLineList = computed(() => {
	let nowRoute = routeLineList.value.find((r) => r.policy == nowActiveType.value);
	return nowRoute && nowRoute.infos.routes;
});
// 获取时间
const getRouteLineTime = computed(() => {
	return (item: any) => {
		return item ? Math.ceil(item.time / 60) : 0;
	};
});
// 获取公里
const getRouteLineKm = computed(() => {
	return (item: any) => {
		return item ? (item.distance / 1000).toFixed(1) : 0;
	};
});
// 获得途径路径
const getRoads = computed(() => {
	return (item: any) => {
		let routes = item.steps.filter((step: any) => step.road != '');
		return `${routes[0].road} > ${routes[1].road} > ${routes[2].road}`;
	};
});
// 弹窗是否显示
const dialogVisible = ref(true);
// const inputMapRef = shallowRef()
let map: any;
onUnmounted(() => {
	if (map) map.destroy();
});
// 初始化地图
function initMap() {
	loadAmap().then(async () => {
		map = new window.AMap.Map('input-map-container', {
			center: [104.066392, 30.672921],
			zoom: 12,
		});
		map.addControl(new window.AMap.ToolBar());
		for (const index in routeLineList.value) {
			let res = await getRouteLine(props.mapInfo.startAddr, props.mapInfo.endAddr, routeLineList.value[index].policy);
			if (res) {
				routeLineList.value[index].infos = res;
			}
		}
		drawDriveLine(routeLineList.value[0].infos.routes, map, 0);
	});
}

// 改变地图路线
function changeRouteLine(index: number) {
	nowAtiveLine.value = index ? index : 0;
	resumeDrawDriveLine();
}
// 改变地图线路类型
function changeRouteType(policy: number) {
	nowActiveType.value = policy;
	resumeDrawDriveLine();
}
// 重新画线
function resumeDrawDriveLine() {
	clearMap();
	drawDriveLine(nowRouteLineList.value, map, nowAtiveLine.value);
}
// 清空地图上所有覆盖物
function clearMap() {
	if (map) {
		const overlays = map.getAllOverlays(); // 获取所有覆盖物
		overlays.forEach((overlay: any) => {
			overlay.setMap(null); // 从地图上移除
		});
	}
}
initMap();

// 关闭地图
function onDialogClose() {
	let nowRouteLineType = routeLineList.value.find((route) => route.policy == nowActiveType.value);
	let nowRouteLine = nowRouteLineType && nowRouteLineType.infos.routes[nowAtiveLine.value];
	let nowSteps = nowRouteLine.steps.map((step: any) => step.path);
	let mapPath: any[] = [];
	nowSteps.forEach((steps: any) => {
		steps.forEach((step: any) => {
			mapPath.push([step.lng, step.lat]);
		});
	});
	emits('handle-finish', {
		mapId: props.mapInfo.id,
		mapType: nowActiveType.value,
		mapIndex: nowAtiveLine.value,
		mapPath,
	});
}
</script>
<style lang="scss">
.marker-label-font {
	font-weight: bold;
	font-size: 24px;
	color: #3d93fd;
}
</style>
<style scoped lang="scss">
.container {
	position: relative;
	.route-plan-box {
		position: absolute;
		top: 10px;
		left: 20px;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		width: 350px;
		max-height: 500px;
		border-radius: 5px;
		background-color: #fff;
		.top {
			padding: 20px 20px 0px;
			background-color: #3d93fd;
			.el-input {
				margin-bottom: 20px;
			}
		}
		.bottom {
			flex: 1;
			.el-scrollbar {
				height: 300px;
				// overflow: hidden;
				// background-color: skyblue;
			}
			.route-types {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				margin: 10px 0px;
				.route-type {
					flex: 1;
					padding: 3px 0px;
					text-align: center;
					border-right: 1px solid #ccc;
					cursor: pointer;
					&:last-child {
						border: 0;
					}
					&.active-type {
						color: #3d93fd;
					}
				}
			}

			.route-lines {
				padding: 10px;
				.route-line {
					height: 100px;
					cursor: pointer;
					.tip {
						width: 100px;
						margin-bottom: 10px;
						padding: 5px 0px;
						text-align: center;
						background-color: #e0f0ff;
					}
					&.active-line,
					&:hover {
						background: #f4f9fd;
						.tip {
							color: #fff;
							background-color: #3d93fd;
						}
					}
				}
			}
		}
	}
}
#input-map-container {
	height: 700px;
	cursor: pointer;
}
</style>
